<template>
  <ContentWrap>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="开始时间" prop="startTime">
        {{ formatStartDateTime(detailData) }}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间" prop="endTime">
        {{ formatEndDateTime(detailData) }}
      </el-descriptions-item>
      <el-descriptions-item label="出差时长">
        {{ detailData.duration }} 小时
      </el-descriptions-item>
      <el-descriptions-item label="出差地点">
        {{ detailData.destination }}
      </el-descriptions-item>
      <el-descriptions-item label="交通工具">
        {{ detailData.transportation }}
      </el-descriptions-item>
      <el-descriptions-item label="预算金额">
        {{ detailData.budgetAmount }}
      </el-descriptions-item>
      <el-descriptions-item label="出差事由">
        {{ detailData.tripReason }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="同行人员">
        {{ detailData.accompanyPersonsNames }}
      </el-descriptions-item> -->
      
    </el-descriptions>
    <OaFileManager class="mt-3" :header="false"  :initial-file-ids="detailData.files" />
  </ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { BusinessTripApplyApi, BusinessTripApplyVO } from '@/api/oa/businesstripapply'

defineOptions({ name: 'OaBusinessTripApplyDetail' })

const { query } = useRoute() // 查询参数

const props = defineProps({
  id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号

/** 格式化开始时间（日期+时间） */
const formatStartDateTime = (data: any) => {
  if (!data.startTime) return '-'
  const dateStr = formatDate(data.startTime, 'YYYY-MM-DD')
  if (!data.startHour) return dateStr
  try {
    // startHour 可能是字符串、数组或对象，统一转换为字符串
    let hourStr = ''
    if (typeof data.startHour === 'string') {
      hourStr = data.startHour
    } else if (Array.isArray(data.startHour)) {
      // 如果是数组，取第一个元素（可能是 [hour, minute, second] 格式）
      hourStr = data.startHour.join(':')
    } else {
      hourStr = String(data.startHour)
    }
    // startHour 格式为 "HH:mm:ss"，我们只取 "HH:mm"
    return `${dateStr} ${hourStr.substring(0, 5)}`
  } catch (e) {
    console.error('formatStartDateTime error:', e, data.startHour)
    return dateStr
  }
}

/** 格式化结束时间（日期+时间） */
const formatEndDateTime = (data: any) => {
  if (!data.endTime) return '-'
  const dateStr = formatDate(data.endTime, 'YYYY-MM-DD')
  if (!data.endHour) return dateStr
  try {
    // endHour 可能是字符串、数组或对象，统一转换为字符串
    let hourStr = ''
    if (typeof data.endHour === 'string') {
      hourStr = data.endHour
    } else if (Array.isArray(data.endHour)) {
      // 如果是数组，取第一个元素（可能是 [hour, minute, second] 格式）
      hourStr = data.endHour.join(':')
    } else {
      hourStr = String(data.endHour)
    }
    // endHour 格式为 "HH:mm:ss"，我们只取 "HH:mm"
    return `${dateStr} ${hourStr.substring(0, 5)}`
  } catch (e) {
    console.error('formatEndDateTime error:', e, data.endHour)
    return dateStr
  }
}

/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  try {
    detailData.value = await BusinessTripApplyApi.getBusinessTripApply(props.id || queryId)
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>
